<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>BI Component - Date Picker</title>
    <link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css"/>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style.css"/>

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <script>
        var BOI = parent.BOI; //REQUIRED
        var BOILib = parent.BOILib;

        var properties = { //REQUIRED
            variable: undefined,
            varname: undefined, //this overrides variable if set
            value: undefined,
            ranges: [],
            notify: false
        };

        window.onload = function () {
            properties.ranges[0] =  {"from":"","to":"","operator":""};
        }

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            $('.variable-head h3').html(properties.variable.description);
            $('.variable').attr('id', vname);

            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var vname;
        var fromOrTo = undefined;
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            if (vname) {
            }
        };

        $(function(){
            $('#datepicker,#datepickerTo').live('click', function () {
                fromOrTo = 'from';
                if ($(this).attr('id') == 'datepickerTo')
                    fromOrTo = 'to';
                var htmlsrc = 'comp/selection/Bi_apps_comp_popupdate.htm';
                BOILib.Util.createIFrameDialog(htmlsrc, 'Date', 250, 270, -1, -1, window);

            });
            $('#clear').live('click', function () {
                resetSelections();

            });
        });

        function setSelectedValue(values){
            properties.value=values;
            if (typeof values == "object") {
                if(values.length > 0) {
                    if(fromOrTo === 'to'){
                        $("#datepickerTo").val(values[0]);
                        properties.ranges[0]['to'] = values[0].replace(/\//g,"");
                        properties.ranges[0]['operator'] = 'BT';
                    }
                    else{
                        $("#datepicker").val(values[0]);
                        properties.ranges[0]['from'] = values[0].replace(/\//g,"");
                    }
                }
            }
        }
        function resetSelections(){
            properties.value ="";
            properties.ranges[0]['to']="";
            properties.ranges[0]['operator'] ="";
            properties.ranges[0]['from']=""
            properties.variable.value="";
            properties.variable.values="";
            BOI.context.variables[this.vname].ranges=[];
            BOI.context.variables[this.vname].value="";
            BOI.context.variables[this.vname].values="";
            $("#datepicker").get(0).value=''
            $("#datepickerTo").get(0).value=''
        }
    </script>
    <style>
        body {
            overflow:hidden; background: none;
        }
    </style>
</head>
<body>
<div class="variable-cover date-wraper">
    <div class="variable multiple" id="">
        <div class="variable-head">
            <h3>Date Picker</h3>
        </div>

        <div class="variable-inner date-picker">
            <p>
                <label>From </label>
                <input type="text" id="datepicker"/>
            </p>
            <p>
                <label>To </label>
                <input type="text" id="datepickerTo"/>
            </p>
            <button id="clear">Clear</button></div>
    </div>
</div>
</div>
</body>
</html>
<%
theme = ''.
%>